<template>
	<div class="cityConsume">
		<el-drawer :visible.sync="isShow" direction="rtl" size="80%" destroy-on-close>
			<template v-slot:title>
				<div class="title">
					<p>城市消耗</p>
				</div>
			</template>
			<div class="line"></div>
			<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
				<el-row style="height: 93%" type="flex">
					<cl-flex1 style="overflow: hidden;">
						<cl-pagefull @resize="onResize">
							<template #head>
                                <el-row type="flex">
									<cl-flex1 />
                                    <div>
                                        <cl-filter-group v-model="search" class="pr-1">
                                            <cl-filter label="时间">
                                                <el-date-picker v-model="search.beginTime" type="date"
                                                    value-format="yyyy-MM-dd" style="width: 230px" :clearable="false"
                                                    :picker-options="pickerOptions" />
                                            </cl-filter>
                                            <!-- <cl-flex1 /> -->
                                        </cl-filter-group>
                                    </div>
                                </el-row>
                            </template>
							<div style="height: 100%">
								<cl-table v-bind="table">
									<cl-empty slot="empty"/>
									<template #column-deposit_num="{ scope: { row } }">
										{{row?'0':''}}
									</template>
									<template #column-deposit_rota="{ scope: { row } }">
										{{row?'0':''}}
									</template>
								</cl-table>
							</div>
							<template #foot>
								<el-row type="flex">
									<cl-flex1 />
									<zm-pagination />
								</el-row>
							</template>
						</cl-pagefull>
					</cl-flex1>
				</el-row>
			</cl-crud>
			<div class="btnBox">
				<button @click="isShow = false">关闭</button>
			</div>
		</el-drawer>
	</div>
</template>
<script>
import dayjs from "dayjs";
export default {
	name: "CityConsume",
	data() {
		return {
			isShow: false,
			search: {},
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() > Date.now();
				}
			},
			table: {
				"context-menu": ["refresh"],
				columns: [
					{ label: "城市", prop: "city_name"},
					{ label: "消耗", prop: "cost" },
					{ label: "展现数", prop: "shows"},
					{ label: "千展费用", prop: "avg_show_cost"},
					{ label: "点击数", prop: "click"},
					{ label: "平均点击单价", prop: "avg_click_cost",width:120},
					{ label: "点击率", prop: "ctr"},
					{ label: "转化数", prop: "converts"},
					{ label: "转化成本", prop: "convert_cost"},
					{ label: "转化率", prop: "convert_rate"},
					{ label: "深转度", prop: "deep_convert"},
					{ label: "深转成本", prop: "deep_convert_cost"},
					{ label: "深转率", prop: "deep_convert_rate"},
					{ label: "加微数", prop: "wechat_num"},
					{ label: "加微成本", prop: "wechat_rota"},
					{ label: "定金数", prop: "deposit_num"},
					{ label: "定金成本", prop: "deposit_rota"}
				],
				props: {
					maxHeight: 500
				}
			}
		};
	},
	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.config)
				.set("dict", {
					api: {
						page: "cityConsumptionList"
					}
				})
				.done();
			app.refresh(this.search);
		},
		async onRefresh(params, { next, done, render }) {
			console.log(this.search);
			const { biz_id,begin_time } = this.search;
			console.log(biz_id);
			let { list } = await next({
				...params,
				biz_id,
				begin_time
			});
			render(list);
		},
		open(row, params) {
			this.search={}
			this.search = {
				...params,
				wechat_num: row.wechat_num,
				advertiser_id: row.advertiser_id,
				converts: row.converts
			}
			console.log(this.search);
			this.isShow=true

		},
		close() {
			this.isShow = false;
		},
		onResize(h) {
			this.table.props.maxHeight = h;
		}
	}
};
</script>
<style lang="scss" scoped>
.cityConsume {
	text-align: center;

	.line {
		position: absolute;
		top: 60px;
		width: 100%;
		border-top: 1px solid #e5e6eb;
		margin-bottom: 10px;
	}
}

.title {
	color: #333;
}

.btnBox {
	position: fixed;
	bottom: 0px;
	right: 0px;
	width: 80%;
	height: 60px;
	border-top: 1px solid #e5e6eb;
	background-color: #fff;

	button {
		height: 60%;
		color: #4e5969;
		position: absolute;
		bottom: 12px;
		right: 20px;
		padding: 5px 12px;
		border: 1px solid #e5e6eb;
		cursor: pointer;
	}

	// #e5e6eb
}
</style>